//商品详情店铺信息
<template>
  <div class="details-shop-info">
    <!-- 店铺图标和名称 -->
    <div class="shop-img-name">
      <img :src="shopInfo.logo" />
      <span>{{shopInfo.name}}</span>
    </div>

    <!-- 销量,全部宝贝以及评分 -->
    <div class="sell-all-score">
      <!-- 总销量和全部宝贝 -->
      <div class="sell">
        <!-- 总销量 -->
        <div class="total">
          <div>
            <span>5.8万</span>
            <div class="number">总销量</div>
          </div>
        </div>
        <!-- 全部宝贝 -->
        <div class="all">
          <span>99</span>
          <div class="all-names">全部宝贝</div>
        </div>
      </div>
      <!-- 线条 -->
      <div class="line"></div>
      <!-- 评分 -->
      <div class="score">
        <div class="item-score" v-for="(item,index) in shopInfo.score" :key="index">
          <span class="real-name">{{item.name}}</span>
          <span :class="['real-score',item.score>=5?'high-color':'low-color']">{{item.score}}</span>
          <span :class="['real-type',item.score>=5?'high-bg':'low-bg']">{{item.score>=5?'高':'低'}}</span>
        </div>
      </div>
    </div>

    <!-- 进店逛逛 -->
    <div class="go-shop">
      <div class="action">进店逛逛</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
  computed: {},
  components: {},
  props: {
    shopInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.details-shop-info {
  margin-top: 20px;
  margin-left: 8px;
  margin-right: 8px;
  color: var(--text-color-text);
  font-size: 14px;
  //店铺图标和名称
  .shop-img-name {
    img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      object-fit: cover;
      vertical-align: middle;
      margin-right: 8px;
    }
  }

  // 销量,宝贝
  .sell-all-score {
    display: flex;
    text-align: center;
    //此属性可以让flex布局的内容垂直居中
    align-items: center;
    //销量
    .sell {
      flex: 1;
      display: flex;
      .total {
        flex: 1;
        .number {
          margin-top: 6px;
          font-size: 12px;
        }
      }
      .all {
        flex: 1;
        .all-names {
          margin-top: 6px;
          font-size: 12px;
        }
      }
    }

    //线条
    .line {
      width: 1px;
      height: 40px;
      background-color: rgba(100, 100, 100, 0.2);
    }
    //评分
    .score {
      flex: 1;
      .item-score {
        height: 30px;
        line-height: 30px;
        text-align: right;
        .real-name {
          text-align: left;
          display: inline-block;
          width: 86px;
        }
        .real-score {
          text-align: left;
          display: inline-block;
          width: 42px;
          margin-left: 8px;
          margin-right: 8px;
          margin-right: 8px;
        }
        .real-type {
          text-align: left;
          color: white;
          font-size: 12px;
        }
      }
    }
  }

  //进店逛逛
  .go-shop {
    font-size: 12px;
    text-align: center;
    .action {
      width: 100px;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      margin-top: 16px;
      margin-bottom: 16px;
      background-color: #f1f5fb;
      display: inline-block;
    }
  }

  .high-color {
    color: #f00;
  }
  .low-color {
    color: #4a8800;
  }
  .high-bg {
    background: #f00;
  }
  .low-bg {
    background: #4a8800;
  }
}
</style>